<template>
    <div>
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        width="35%"
        top="15vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">会员</span>
        </div>
        <div class="integral_content">
            <div class="integral_content_top">
                <el-radio-group v-model="memberId">
                    <el-radio :label="item.id" v-for="item in memberList" :key="item.id">{{item.name}}</el-radio>
                </el-radio-group>
            </div>
            <div class="integral_content_conter">
              <span>会员时长：</span>
              <div>
                  <el-select v-model="membershipDuration" placeholder="请选择会员时长">
                    <el-option
                        v-for="item in membershipDurationList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
              </div>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer" style="margin-top: 20px;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="resetForm()">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "adjustStar",
  props: {
    propsObj: {   // 用户数据
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      centerDialogVisible: true,  
      userObj: {},
      memberId: null,   // 会员ID
      membershipDuration: null, // 会员时长ID
      memberList: [
        { id: "1", name: "普通会员"},
        { id: "2", name: "荣誉会员"},
        { id: "3", name: "VIP会员"},
        { id: "4", name: "超级会员"},
      ],
      membershipDurationList: [
        { id: "0", name: "永久"},
        { id: "1", name: "1个月"},
        { id: "2", name: "2个月"},
        { id: "3", name: "3个月"},
        { id: "4", name: "4个月"},
        { id: "5", name: "5个月"},
        { id: "6", name: "6个月"},
        { id: "7", name: "7个月"},
        { id: "8", name: "8个月"},
        { id: "9", name: "9个月"},
        { id: "10", name: "10个月"},
        { id: "11", name: "11个月"},
        { id: "12", name: "12个月"}
      ]
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val;
        this.memberId = this.userObj.memberId;  // 会员ID
        if (this.userObj.membershipDuration) {
          this.membershipDuration = this.userObj.membershipDuration // 会员时长ID
        }
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    // 关闭弹框；
    closeTheReportDialog(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeMembershipObjDialog');
    },
    // 确定
    resetForm(){
      if (this.memberId === null) {
        this.$message.warning('会员不能为空！');
        return false;
      }
      if (this.memberId === '2'){
        if (this.membershipDuration === null) {
          this.$message.warning('荣誉会员必须选择会员时长！');
          return false;
        }
      }else if (this.memberId === '3'){
        if (this.membershipDuration === null) {
          this.$message.warning('VIP会员必须选择会员时长！');
          return false;
        }
      }else if (this.memberId === '4'){
        if (this.membershipDuration === null) {
          this.$message.warning('超级会员必须选择会员时长！');
          return false;
        }
      }
      this.userObj.memberId = this.memberId;  // 修改的会员ID
      this.userObj.membershipDuration = this.membershipDuration;  // 修改的时长ID
      if(this.memberList && this.memberList.length > 0){
        for (let i = 0; i < this.memberList.length; i++) {
          if (this.memberList[i].id === this.memberId) {
            this.userObj.member = this.memberList[i].name;
            break;
          }
        }
      } 
      if (this.membershipDurationList && this.membershipDurationList.length > 0) {
        for (let j = 0; j < this.membershipDurationList.length; j++) {
          if (this.membershipDurationList[j].id === this.membershipDuration){
            this.userObj.membershipName = this.membershipDurationList[j].name;  // 会员时长
            break;
          }
        }
      }
      this.$emit('emitUserData',this.userObj);
      this.$message.success('操作成功！');
      this.close() 
     
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    margin-left: 11%;
    .integral_content_top{
       width: 100%;
       display: flex;
       justify-content: start;
       align-items: center;
       span{
          font-size: 16px;
          color: #000;
          margin-right: 13px;
       }
    }
    .integral_content_conter{
        margin-top: 50px;
        display: flex;
        justify-content: start;
        align-items: center;  
        span{
            font-size: 16px;
            color: #000;
            margin-right: 13px;
        }
    }
}
</style>
